<template>
  <px-dialog v-model="visible" custom-class="tool-dialog" title="抄表记录-历史曲线" width="800px" @open="openDialog" @close="closeDialog">
    <px-form ref="formRef" class="custom-form-ui-new" :inline="true" label-position="right" label-width="120px">
      <px-form-item label="时间日期">
        <px-date-picker
          v-model="queryParams.time"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </px-form-item>
      <px-form-item>
        <px-button type="primary" @click="queryTable">搜索</px-button>
        <px-button @click="resetTable">重置</px-button>
      </px-form-item>
    </px-form>
    <LineCharts />
  </px-dialog>
</template>
<script lang="ts" setup>
import { computed, reactive, toRefs } from "vue";
import LineCharts from "./LineCharts.vue";

// 调用父级-查询主页列表、关闭弹窗方法
const emits = defineEmits(["queryTable", "closeDialog"]);
// 父级传过来的值
const props = defineProps({
  // 控制弹窗显示隐藏
  visible: {
    type: Boolean,
    default: false
  }
});
const visible = computed(() => props.visible);

const state = reactive<any>({
  queryParams: {}
});

const { queryParams } = toRefs(state);

// 打开弹窗
const openDialog = async () => {};
// 查询列表关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
const queryTable = () => {};
const resetTable = () => {};
</script>
